<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .div_head{
            padding: 0;
            position:fixed;
            width: 100%;
            height: 4rem;
            right: 0;
            top:0;
            background-color:white;
            z-index: 55;
        }
        #head_span{
            display: block;
            margin: 9px 70px 0 0 ;
        }
        #head_span>a{
            text-decoration: none;
            color: #909399;
            margin-left: 20px;
        }
        #head_span a:hover{
            color: rgb(145, 160, 208);
        }
        .c1{
            border: 1px solid #ecebeb; height:200px; width: 460px; float: left;
        }
        .c2{
            text-align: center;
        }
        .c2>div{
            float: right;height: 200px;width: 220px;border: 1px solid #ecebeb;box-sizing: border-box;
        }
        .c2>div>a{
            font-size: 14px; width: 95px;height: 30px;
            border: 1px solid #F55A19FF;display: block;
            margin-left:60px ;color: #F55A19FF;text-decoration: none;
            line-height: 30px;
        }
        .c3{
            width: 300px;height:300px;
            position: relative;float: left;
        }
        .c3>div{
            position: relative;padding: 15px 0 0 20px
        }

        .c4{
           width: 840px;height:300px;
            position: relative;float: left;

        }
        .c4>div{
            text-align: center;  position: relative; margin: 40px 160px 0 0;
        }
        .c4>div>div{
            float: right;height: 136px;width: 210px;
            border: 1px solid #d2d0d0;box-sizing: border-box;
            background-color: #fff;
        }
        .c4>div>div>div{
            position: relative;top:10px;
        }

        .c5{
            font-size: 14px;color: black;margin: -12px;
        }
        .c6{
            font-size: 48px;color: #F55A19FF;
        }
        .c7{
            position: relative;margin: 0 0 0 -20px;
        }
        .c7>a{
            font-size: 14px; color: #F55A19FF;width: 130px;height: 30px;
            border: 1px solid #F55A19FF;display: block;margin-left:60px ;
            text-decoration: none;
            line-height: 30px;
        }
        .c2>div>i{
            margin:20px 0 0 0; font-size: 60px;
            color: #f55a19;
        }
        .c2>div>p{
            font-size: 18px;
        }
        .c1>div>span>i>a{
            text-decoration: none;
            color: #666;
        }
        .c1>img{
            position: relative;top:40px;left: 40px;
        }
        .c1>div{
            float: right;position: relative;top:27px;right: 50px;
        }



    </style>
</head>
<body>
<div id="app">
    <el-container>
            <div class="div_head">
                <el-menu mode="horizontal" background-color="white"
                         text-color="color: rgb(29, 56, 136)" active-text-color="color: rgb(29, 56, 136)" style="width:1200px;margin: 0 auto">
                    <el-menu-item><img height="50px" src="imgs/logo.png" alt=""></el-menu-item>
                    <el-menu-item index="1">首页</el-menu-item>
                    <el-menu-item index="2">蛋糕</el-menu-item>
                    <el-menu-item index="3">下午茶</el-menu-item>
                    <el-menu-item index="4">精选食材</el-menu-item>
                    <el-menu-item index="5">最新活动</el-menu-item>
                    <el-menu-item index="6">企业专区</el-menu-item>
                    <el-menu-item index="6">会员中心</el-menu-item>
                    <div style="float: right;position: relative; top: 10px">
                <span id="head_span">
                <a href="">登录 </a> <a href=""> 注册</a>
                    <a href=""><i class="el-icon-s-goods" style="margin-left: 10px"></i></a>
                </span>
                    </div>
                </el-menu>
            </div>
        <el-main style="width: 1200px;margin: 0 auto">
            <div style="width: 1150px;height: 90px;background-color: white;">
            </div>
            <div id="a1">
                <div class="c1">
                    <img src="imgs/cc.png" alt="">
                    <div >
                        <p style="font-size: 18px; color: #000 ">欢迎回到有家蛋糕店！</p>
                        <p style="font-size: 18px; color: #f55a19 ">aSu13339978055</p>
                        <span><i style="color: #b7b7b7" class="el-icon-document"><u style="color: #b7b7b7">修改密码</u></i></span>
                        <span><i style="color: #b7b7b7" class="el-icon-edit"><u style="color: #b7b7b7">留言</u></i></span>
                        <br>
                        <span><i style="" class="el-icon-place"><a href="">收货地址</a></i></span>
                        <span><i style="" class="el-icon-notebook-1"><a href="">编辑资料</a></i></span>
                    </div>
                </div>
                <div class="c2" >
                   <!-- <div>
                        <i style="margin:40px 0 20px 0; " class="el-icon-user-solid"></i>
                        <p style="font-size: 18px;">余额</p>
                        <a  style="" href="">充值</a>
                    </div>
                    <div >
                        <i style="margin:40px 0 20px 0; " class="el-icon-user-solid"></i>
                        <p style="font-size: 18px;">点金</p>
                        <a  style="" href="">点金说明</a>
                    </div>-->
                    <div >
                        <i class="el-icon-wallet"></i>
                        <p >余额</p>
                        <a  style="" href="">充值</a>
                    </div>
                    <div >
                        <i class="el-icon-location-information"></i>
                        <p >收货地址</p>
                        <a  style="" href="">添加</a>
                    </div>
                    <div >
                        <i class="el-icon-shopping-cart-full"></i>
                        <p >我的订单</p>
                        <a  style="" href="">查看</a>
                    </div>
                    <!--<div style="float: right;height: 200px;width: 220px;border: 1px solid black;box-sizing: border-box;">2</div>
                    <div style="float: right;height: 200px;width: 220px;border: 1px solid black;box-sizing: border-box;">3</div>-->
                </div>
            </div>
        </el-main>
        <div style="width: 1200px;height: 38px;background-color: white;"></div>
        <el-main style="width: 1200px;height:360px;margin: 0 auto;background-color: #f5f5f5">
            <div  class="c3" >
                <div>
                    <p>点金兑换规则：</p>
                    <p>1、点金可兑换优惠券</p>
                    <p>2、优惠券有效期1年</p>
                    <p>3、一张订单仅可使用一张券</p>
                    <p>4、优惠券不可与其他优惠同时享受</p>
                    <p>5、优惠券适合所有的商品</p>
                </div>
            </div>
            <div  class="c4" >
                <div >
                    <div >
                        <div >
                            <p class="c5">
                                <span >￥</span>
                                <span class="c6">40</span>
                                <span >元优惠券</span>
                            </p>
                            <p>满458可用</p>
                            <p>全品类</p>
                        </div>
                        <br>
                        <div class="c7">
                            <a href="">40点金立 即兑换</a>
                        </div>
                    </div>
                    <div >
                        <div >
                            <p class="c5">
                                <span >￥</span>
                                <span class="c6">30</span>
                                <span >元优惠券</span>
                            </p>
                            <p>满358可用</p>
                            <p>全品类</p>
                        </div>
                        <br>
                        <div class="c7">
                            <a href="">30点金立 即兑换</a>
                        </div>
                    </div>
                    <div >
                        <div >
                            <p class="c5">
                                <span >￥</span>
                                <span class="c6">20</span>
                                <span >元优惠券</span>
                            </p>
                            <p>满258可用</p>
                            <p>全品类</p>
                        </div>
                        <br>
                        <div class="c7">
                            <a href="">20点金立 即兑换</a>
                        </div>
                    </div>
                </div>
            </div>
        </el-main>
        <div style="width: 1200px;height: 128px;background-color: white;">
        </div>
        <el-footer>
            <div style="background-color: #282c30;color: #666666;text-align: center;padding: 50px 0">
                <p>有家蛋糕 提前3小时预订，北京市六环内免费配送 公司地址：北京市朝阳区798艺术区工美楼3层</p>
                <p>Copyright © 2009-2023 ebeecake有家蛋糕 有家（北京）食品有限公司 京ICP备09081733号-1 <img src="https://cdn.tmooc.cn/tmooc-web/css/img/beianh2019082901.png"> 京公网安备 11010802029572号</p>
                <p>公司电话：4006106798    食品经营许可证：JY11105110232865    食品生产许可证：SC12411051114584</p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {

            }
        },
        methods:{

        }
    })
</script>
</html>